<template>
  <div class="image-wrapper" :class="size">
    <div class="chart-title" @click="toPage()"><span>{{ imageMap[index].name }}</span></div>
    <div class="chart-image">
      <div class="images">
        <img src="../../../assets/campus/p3-2.png" alt="" v-if="index===0">
        <img src="../../../assets/campus/p3-3.png" alt="" v-if="index===1">
        <img src="../../../assets/campus/p2-1.png" alt="" v-if="index===2">
        <img src="../../../assets/campus/p2-2.png" alt="" v-if="index===3">
        <img src="../../../assets/campus/p-1.png" alt="" v-if="index===4">
        <img src="../../../assets/campus/p-2.png" alt="" v-if="index===5">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonChart',
  props: ['chartType', 'size', 'data', 'index'],
  data () {
    return {
      imageMap: {
        0: {
          name: '详细信息',
          image: '../../../assets/campus/p3-2.png'
        },
        1: {
          name: '详细信息',
          image: '../../../assets/campus/p3-3.png'
        },
        2: {
          name: '详细信息',
          image: '../../../assets/campus/p2-1.png'
        },
        3: {
          name: '详细信息',
          image: '../../../assets/campus/p2-2.png'
        },
        4: {
          name: '详细信息',
          image: '../../../assets/campus/p-1.png'
        },
        5: {
          name: '详细信息',
          image: '../../../assets/campus/p-2.png'
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    toPage () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '41' } })
    }
  },
  beforeDestroy () {
  }
}
</script>

<style scoped lang="scss">
</style>
